<!DOCTYPE html>
<html lang="en" >
  <head>
    <title>Themepro</title>    
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/themepro/index.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/red.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/blue.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/dark.css" />          
    <link rel="stylesheet" type="text/css" href="/themepro/vanilla-picker.csp.css" />          
    <script src="/themepro/index.umd.js"></script>
    <script src="https://unpkg.com/vanilla-picker@2"></script>
    <style> 
        .theme,.custom-theme{
            padding:0.5em 1em;
            background:white;
            border:1px solid #333;
            cursor: pointer;
            color:gray;
        }
        .color{
            width: 49%;
            padding: 0.5em 1em;
            border: var(--auto-border);
            cursor: pointer;
        }
    </style> 
  </head>
  <body style="overflow: hidden;">
    <div style="text-align:center;display:flex;flex-direction:column;gap:1em;padding:1rem;"> 
            <div class="auto-card">
                <div class="auto-card-header">主题色</div>
                <div class="auto-card-body"> 
                    <div id="themes" style="display:flex;gap:0.5em;justify-content:center;">                    
                        <div class="custom-theme" id="custom-colorpicker">定制</div>
                        <div class="theme" style="background:white;">Light</div>
                        <div class="theme" style="background:#444;">Dark</div>
                        <div class="theme" style="background:blue;">Blue</div>
                        <div class="theme" style="background:red;">Red</div>
                    </div> 
                </div>
            </div>  
            
            <div class="auto-card">
                <div class="auto-card-header">尺寸</div>
                <div class="auto-card-body"> 
                    <div id="sizes" style="display:flex;gap:0.5em;text-align:center;justify-content:center">             
                        <label class="size-input"><input type="radio" name="size" value="x-small" >x-small</label>
                        <label class="size-input"><input type="radio" name="size" value="small"> small</label>
                        <label class="size-input"><input type="radio" name="size" value="medium" checked> medium</label>              
                        <label class="size-input"><input type="radio" name="size" value="large"> large</label>
                        <label class="size-input"><input type="radio" name="size" value="x-large"> x-large</label>              
                    </div>
                </div>
            </div> 
            <div class="auto-card">
                <div class="auto-card-header">字体</div>
                <div class="auto-card-body color-container" style="flex-direction:row;flex-wrap: wrap; gap:0.2rem;align-items: center;justify-content: space-between"> 
                    <div class="color" style="font:var(--auto-font)">--auto-font</div>  
                    <div class="color" style="font-size:var(--auto-font-size)">--auto-font-size</div>  
                    <div class="color" style="font-family:var(--auto-font-family)">--auto-font-family</div>    
                    <div class="color" style="font-weight:var(--auto-font-weight)">--auto-font-weight</div>          
                    <div class="color" style="letter-spacing:var(--auto-letter-spacing)">--auto-letter-spacing</div>    
                    <div class="color" style="line-height:var(--auto-line-height)">--auto-line-height</div>
                </div>
            </div> 
    </div>        
    <script>
        const element = document.getElementById('themes');  
        element.addEventListener('click', (event) => {
            if(event.target.classList.contains('theme')){
                document.documentElement.dataset.theme = event.target.innerText.toLowerCase();  
            }            
        });        
        
        const sizes = document.querySelector("#sizes")
        sizes.addEventListener('change', (event) => {
            const size = document.querySelector('input[type=radio][name=size]:checked')
            ThemePro.size = size.value
        });  
        var primaryPicker = new Picker({
            parent:  document.getElementById("custom-colorpicker"), 
            onChange: function(color) {
                ThemePro.theme = 'custom'; 
                ThemePro.create({
                    name:"custom",
                    theme:color.hex
                }) 
            }
        })
    </script>
    
    <script>
      document.querySelector('.color-container').addEventListener('click', function(event) {
        // 检查点击的是否为.color元素
        if (event.target.classList.contains('color')) {
          // 获取背景颜色变量
          const style = window.getComputedStyle(event.target);
          const backgroundStyle = event.target.getAttribute('style');
          const match = backgroundStyle.match(/:\s*(var\([^)]+\))/);
          
          if (match && match[1]) {
            const colorVariable = match[1];
            
            // 复制到剪贴板
            navigator.clipboard.writeText(colorVariable)
              .then(() => {
                // 显示复制成功的提示
                const originalText = event.target.innerHTML;
                event.target.innerHTML = '已复制!';
                
                // 2秒后恢复原始文本
                setTimeout(() => {
                  event.target.innerHTML = originalText;
                }, 1000);
              })
              .catch(err => {
                console.error('复制失败:', err);
              });
          }
        }
      });
    </script>
  </body>
</html>

